<template>
    <el-container style="max-width: 1200px; margin: 0 auto;">
      <!-- 菜单 -->
      <div class="fixed-menu">
        <Menu style="border-color:blue;"></Menu>
      </div>
  
      <el-row>
        <el-col class="border-box" :span="24" :offset="0">
          <!-- 这里留空，因为菜单已经固定在顶部 -->
        </el-col>
      </el-row>
  
      <el-header style="height: 100px;" class="heraderClass">
        <Header></Header>
      </el-header>
      <el-main>
        <el-row class="border-box" :gutter="20">
          <el-col :span="24" :offset="0">
            <router-view></router-view>
          </el-col>
        </el-row>
      </el-main>
      <el-footer class="footer">
      <el-row :gutter="20">
        <el-col class="border-box" :span="24" :offset="0">
          <div class="footer-links">
            <h3 class="footer-title">友情链接</h3>
            <el-row :gutter="20">
              <el-col :span="6" class="footer-link-item">
                <el-link href="https://www.baidu.com" target="_blank">百度</el-link>
              </el-col>
              <el-col :span="6" class="footer-link-item">
                <el-link href="https://www.bilibili.com" target="_blank">哔哩哔哩</el-link>
              </el-col>
              <el-col :span="6" class="footer-link-item">
                <el-link href="https://www.zhihu.com" target="_blank">知乎</el-link>
              </el-col>
              <el-col :span="6" class="footer-link-item">
                <el-link href="https://www.douban.com" target="_blank">豆瓣</el-link>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col class="border-box" :span="24" :offset="0">
          <div class="footer-content">
            <p>© 2024 宠物百科网站 版权所有</p>
            <p>联系我们: <a href="mailto:contact@petbaike.com">contact@petbaike.com</a></p>
            <p>地址: 中国</p>
          </div>
        </el-col>
      </el-row>
    </el-footer>
    <el-backtop :right="40" :bottom="100" :visibility-height="200">
      <el-button type="primary" circle>
        <el-icon><ArrowUpBold /></el-icon>
      </el-button>
    </el-backtop>
    </el-container>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import Menu from '@/views/home/menu.vue';
  import Header from '@/views/home/header.vue';
  import Baike from '@/views/home/animeBaike.vue'
  import AnimeWike from '@/views/home/animeWike.vue'
  import AnimeCarousel from '@/views/home/animeCarousel.vue'
  import Baike_wike from './home/baike_wike.vue';
  import AnimeNew1 from '@/views/home/animeNew1.vue'
  import AnimeNew2 from '@/views/home/animeNew2.vue'
  import AnimeImg from '@/views/home/animeImg.vue';
  import animeBaikeT from './home/animeBaikeT.vue';
  import { ArrowUpBold } from '@element-plus/icons-vue';
  
  const search = ref('');
  </script>
  
  <style>
  .border-box {
  padding: 10px;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.border-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 固定菜单样式 */
.fixed-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  color: white;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.fixed-menu:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 调整 el-container 的顶部间距，避免内容被菜单遮挡 */
.el-container {
  padding-top: 60px; /* 根据菜单高度调整 */
}

/* 页脚样式 */
.footer {
  background: linear-gradient(135deg, #43cea2 0%);
  backdrop-filter: blur(10px);
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  color: white;
  border-radius: 0 0 12px 12px;
  margin-top: 30px;
}

.footer:hover {
  background-color: rgba(255, 255, 255, 0.98);
  border-top-color: rgba(0, 0, 0, 0.15);
}

.footer-links {
  margin-bottom: 30px;
}

.footer-links .el-link {
  color: #666;
  transition: all 0.3s ease;
}

.footer-links .el-link:hover {
  color: #409eff;
  transform: translateY(-2px);
}

.footer-title {
  font-size: 18px; /* 标题字体大小 */
  margin-bottom: 10px; /* 标题与链接的间距 */
}

.footer-link-item {
  margin-bottom: 10px; /* 链接项之间的间距 */
}

.footer-content {
  font-size: 14px;
  color: #666;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.footer:hover .footer-content {
  opacity: 1;
}

.footer-content p {
  margin: 5px 0; /* 段落间距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer-links .el-col {
    span: 12; /* 小屏幕下每行显示 2 个链接 */
  }

  .footer-title {
    font-size: 16px; /* 标题字体大小调整 */
  }

  .footer-content {
    font-size: 12px; /* 内容字体大小调整 */
  }
}

@media (max-width: 480px) {
  .footer-links .el-col {
    span: 24; /* 超小屏幕下每行显示 1 个链接 */
  }

  .footer-title {
    font-size: 14px; /* 标题字体大小调整 */
  }

  .footer-content {
    font-size: 12px; /* 内容字体大小调整 */
  }
}
  </style>